<template>
  <div class="goods-detail">
    <div class="title">
      <van-nav-bar
        :title="goodsitem.title"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image, index) in goodsitem.images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 标题 -->
    <div class="goods-title">
      <div class="goods-name">
        <p>{{ goodsitem.title }}</p>
        <div>
          <span>￥{{ goodsitem.marketPrice }}</span>
          <i>￥{{ goodsitem.marketPrice }}</i>
        </div>
      </div>
      <div class="share">
        <van-icon name="share" color="#c1a466" size="0.2rem" />
        <div>分享</div>
      </div>
    </div>

    <!-- 运费 -->
    <van-cell-group>
      <van-cell title="运费无" :value="`销量${goodsitem.sales}`" />
    </van-cell-group>

    <!-- 促销 -->
    <van-cell value="内容" is-link>
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span>促销</span>
        <span class="custom-title">
          <van-tag type="danger">标签</van-tag>
        </span>
        <span>包邮</span>
      </template>
    </van-cell>
    <van-cell title="已选：" is-link @click="addCart" />
    <van-cell title="配送：同城送、快递、自提" is-link />

    <!-- 店铺 -->
    <div class="shop"  @click="clickToIndex">
      <div class="shop-img">
        <img src="http://www.zuoancellar.cn/img/logo.png" alt="" />
      </div>
      <p>左岸国际酒窖</p>
      <div class="inshop">
        <van-button round hairline  @click="clickToIndex">进店</van-button>
      </div>
    </div>
    <!-- 评价 -->
    <div class="assess">
      <van-cell title="宝贝评价" value="暂无评价" size="large" />
    </div>
    <!-- 商品详情 -->
    <div class="goods-des">
      <div class="des-title">商品详情</div>
      <img
        :src="item"
        alt=""
        v-for="(item, index) in goodsitem.images"
        :key="index"
        width="100%"
      />
    </div>
    <div class="logo">
      <img src="~assets/dnyimg/logo.png" alt="" />
    </div>

    <div>
      <van-goods-action>
        <van-goods-action-icon icon="shop-o" text="店铺"  @click="clickToIndex"/>
        <van-goods-action-icon icon="cart-o" text="购物车" @click="clickToCart"/>
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="addCart"
        />
        <van-goods-action-button type="danger" text="立即购买" @click="goBy" />
      </van-goods-action>
    </div>
    <!-- 加入购物车弹框 -->
    <div>
      <van-action-sheet v-model="show" title="加入购物车">
        <van-card
          :desc="`库存${goodsitem.stoc}`"
          :title="goodsitem.title"
          :thumb="goodsitem.imageUrl"
        />

        <div class="add-num">
          <span>购买数量：</span>
          <van-stepper v-model="value" />
        </div>
        <van-button
          type="primary"
          size="large"
          round
          color="#c1a466"
          @click="confrimCart"
          >确认</van-button
        >
      </van-action-sheet>
    </div>

    <!-- 立即购买弹窗 -->

    <div>
      <van-action-sheet v-model="buyShow" title="选择商品">
        <van-card
          :desc="`库存${goodsitem.stoc}`"
          :title="goodsitem.title"
          :thumb="goodsitem.imageUrl"
        />

        <div class="add-num">
          <span>购买数量：</span>
          <van-stepper v-model="buyValue" />
        </div>
        <van-button
          type="primary"
          size="large"
          round
          color="#c1a466"
          @click="confrimGoBy(goodsitem)"
          >确认</van-button
        >
      </van-action-sheet>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { getGoodsList, addCart, editCartList,editGoodsList } from "@/api/goods.js";
import { getCartList } from "@/api/cart.js";
import {
  NavBar,
  Swipe,
  SwipeItem,
  Lazyload,
  Cell,
  CellGroup,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  Sku,
  ActionSheet,
  Card,
  Stepper,
  Button,
  Toast,
} from "vant";

Vue.use(NavBar);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Lazyload);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(Sku);
Vue.use(ActionSheet);
Vue.use(Card);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(Toast);
export default {
  data() {
    return {
      goodsitem: {},
      show: false,
      value: 1,
      isCart: false,
      buyShow:false,
      buyValue:1
    };
  },

  created() {
    //通过获取商品id
    this.goodsId = this.$route.params.id;
    this.getGoods({ goodsId: this.goodsId });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //获取商品item数据
    async getGoods(params) {
      let rs = await getGoodsList(params);
      this.goodsitem = rs.data[0];
    },
    clickChooseHandle() {
      this.show = true;
    },
    //加入购物车
    addCart() {
      this.show = true;
    },
    async confrimCart() {
      //获取购物车数据列表
      let list = await getCartList({});
      let data = list.data;
      //设置一个记录购物车id的数组
      let idList = [];
      data.forEach((item) => {
        idList.push(item.goodsId);
      });
      //遍历购物车列表
      data.forEach(async (item) => {
        if (item.goodsId === this.goodsitem.goodsId) {
          //修改购物车列表数据
          item.num += this.value;
          await editCartList(item);
          //修改商品库存
          item.stoc -= this.value
          await editGoodsList(item)
          this.getGoods({ goodsId: item.goodsId })
          this.isCart = true;
        }
      });
      //查询如果购物车中没有该商品，就添加商品
      if (!this.isCart && idList.indexOf(this.goodsitem.goodsId) < 0) {
        await addCart(this.goodsitem);
        this.isCart = false;
      }
      this.show = false;
      Toast("加入购物车成功");
    },
    clickToIndex(){
        this.$router.push("/")
    },
    clickToCart(){
        this.$router.push("/redwine/cart")
    },
    //立即购买
    goBy(){
        this.buyShow= true
    },
    //确认购买
    async confrimGoBy(goodsItem){
        //修改商品列表购买数量
          goodsItem.godsNum = this.buyValue
          await editGoodsList(goodsItem)
          this.getGoods({ goodsId: goodsItem.goodsId})
          let list=[]
          list.push(goodsItem.goodsId)
        this.$router.push({path:"/confirmOrder",query:list})
    }
    
  },
};
</script>

<style lang="stylus" scoped>
// @import '~assets/border.styl'
.goods-detail
    background #f9f9f9
    position relative
    margin-bottom .5rem
    .title
        background #fff
        z-index 999
        width 100%
        position fixed
        top 0
    .swiper
        margin-top .46rem
    .goods-title
        background #fff
        display flex
        margin .1rem auto
        width 98%
        // $border(0 0 1px 0, #eee)
        .goods-name
            font-size .16rem
            font-weight bold
            flex 1
            p
                line-height .2rem
                margin-bottom .06rem
            div
                color #c1a466
                span
                    font-size .18rem
                    margin-right .2rem
                i
                    text-decoration line-through
                    font-size .14rem
        .share
            width .5rem
            text-align center
    .custom-title
        margin 0 .1rem
    .shop
        background #fff
        width 100%
        display flex
        align-items center
        margin-top .1rem
        height .9rem
        .shop-img
            width .9rem
            img
                width .9rem
                height .7rem
        .inshop
            width .8rem

            .van-button__text
                color #c1a466
        p
            margin-left .1rem
            font-size .16rem
            color #aaa
            flex 1
    .assess
        margin-top .1rem
    .des-title
        text-align center
        line-height .5rem
        background #fff
        margin-top .1rem
        font-size .16rem
    .logo
        margin 0 auto
        text-align center
        background #ebebeb
        img
            width 100%
            height 0.5rem
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 320px;
    text-align: center;
    background-color: #39a9ed;
    }
    .my-swipe .van-swipe-item img{
        width:100%;
        height:100%
    }
    .content {
    padding: 16px 16px 160px;
  }
  .add-num{
      line-height .4rem
      width 90%
      margin 0 auto
      display flex
      align-items center
      justify-content space-between
  }
  >>> .van-icon-arrow-left{
    color:#fb4a30
}
</style>
